<!DOCTYPE html>
<html>
<head>
    <title>Turing Puzzle Game</title>
    <link rel="stylesheet" href="styles/main.css" type="text/css">
    <link rel="stylesheet" href="styles/jquery-ui.css" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="model/Alphabet.js"></script>
    <script type="text/javascript" src="model/Rule.js"></script>
    <script type="text/javascript" src="model/State.js"></script>
    <script type="text/javascript" src="model/RulesTable.js"></script>
    <script type="text/javascript" src="model/Tape.js"></script>
    <script type="text/javascript" src="model/TuringMachine.js"></script>
    <script type="text/javascript" src="model/Task.js"></script>
    <script type="text/javascript" src="puzzles/puzzles.js"></script>
    <script type="text/javascript" src="timer.js"></script>
    <script type="text/javascript" src="ui/Renderer.js"></script>
    <script type="text/javascript" src="ui/ui.js"></script>
</head>
<body>

<div id="dialog_wrapper" class = "main_frame" hidden="hidden">
<div id="help_dialog" title="Help">
    <h2>Turing puzzle</h2>
    <p>
        Turing puzzle is a puzzle game.
        The goal is to build a turing machine that transforms a given input tape to the output tape.
        What is found by
        the right hand side of current cursor position is considered to be machine's output.
    </p>
</div>
</div>
    <div id="main_frame">
        <div class="task_name_container">
            <h1 id="task_name"></h1>
            <p id="task_description"></p>
        </div>
        <div class="task_select_container">
            <select id="task_select"></select>
        </div>

        <div class="scroll" id="final_state_scroller">
            <div id="final_state_wrapper">
                <!-- Final state of the tape. The task -->
                <table id="final_state" class="tape_container">
                <tbody>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>

        <div class="scroll" id="current_state_scroller">
            <div id="current_state_wrapper">
            <!-- The tape-->
            <table id="current_state" class="tape_container">
            <tbody>
                <tr>
                    <td>0</td>
                </tr>
            </tbody>
            </table>
            </div>
        </div>

        <!-- Rules table -->
        <div id="div_rules_table" class="div_rules_table">
            <table id="rules_table" class="rules_table">
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>0</td>
                    </tr>
                </tbody>
            </table>
        </div>

	    <!-- Buttons -->
        <div id="buttons" class="buttons_container">
            <div id="div_button_add_state" class="div_button">
                <button id="btn_add_state" class="button state_modifying">Add state</button>
            </div>
            <div id="div_button_start" class="div_button">
                <button id="btn_start" class="button">Start/Continue</button>
            </div>
            <div id="div_button_reset" class="div_button">
                <button id="btn_reset" class="button">Reset</button>
            </div>
            <div id="div_button_step" class="div_button">
                <button id="btn_step" class="button">Step</button>
            </div>
            <div id="div_button_help" class="div_button">
                <button id="btn_help">HELP</button>
            </div>
        </div>
    </div>
</body>
</html>
